<template>
  <div>
    <div class="log">
      <div class="header">
        <el-table :data="logformData" size="mini">
          <el-table-column prop="id" label="序号">
          </el-table-column>
          <el-table-column prop="realname" label="访问人真实姓名">
          </el-table-column>
          <el-table-column prop="method" label="访问方式">
          </el-table-column>
          <el-table-column prop="content" label="访问路径">
          </el-table-column>
          <el-table-column label="访问时间">
            <template slot-scope="scope">
              {{scope.row.logTime | fmtDate_global}}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="paginetion">
        <!-- 分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    get,
    post
  } from "@/utils/request";
  import {
    mapActions,
    mapState
  } from "vuex";


  export default {
    data() {
      return {
        logformData: [],
        total: 10,
        pageSize: 8,
        currentPage: 1,

      };
    },
    computed: {
      ...mapState("log", ["logData"]),
    },
    methods: {
      ...mapActions("log", ["getAlllogData"]),
      handleSizeChange(val) {
        // 将每页要展示的数据的条数 进行一个更新
        this.pageSize = val;
        // 将当前的页数 重置到第一页
        this.currentPage = 1;
        // 重新调用获取所有产品数据的方法
        this.getAllProductData();
      },

      handleCurrentChange(val) {
        // 将当前页数 与 分页插件动态点击控制的页数相绑定
        this.currentPage = val;
        // 重新调用获取所有产品数据的方法
        this.getAllProductData();
      },
      async getAllProductData() {
        // 获取参数
        let data = {
          page: this.currentPage,
          pageSize: this.pageSize,
        };
        // 通过对应的参数发送网络请求 获取产品数组数据
        let res = await get("/baseLog/pageQuery", {
          ...data,
          ...this.queryData
        });
        // 将data中的产品数组 进行赋值

        this.logformData = res.data.list;
        // // 页面总数据条数 赋值
        this.total = res.data.total;
      },

      FinelogData() {
        let data = {
          page: 1,
          pageSize: 8,
        };
        this.getAlllogData(data);

      },

    },
    created() {
      this.FinelogData();
      this.getAllProductData();
    },
    mounted() {

    },
  };

</script>
<style scoped>
  .paginetion {
    float: right;
    margin-top: 20px;
  }

</style>
